<section class="column">
  <app-view-header>
    <img *ngIf="auxappAccount.image.getSmallSizeUrl()"
         [src]="auxappAccount.image.getSmallSizeUrl()">
    <i *ngIf="!auxappAccount.image.getSmallSizeUrl()"
       class="fa fa-user"></i>
    {{auxappAccount.getFullName()}}
  </app-view-header>

  <div *ngIf="!hasConnectedAccount"
       class="card">
    <h3>Guest Account</h3>
    <p>Your account is a guest account and can only be accessed from this device.
      To create a permanent account that can be used accross devices, login with
      <span (click)="connect('soundcloud')" class="btn btn-link">SoundCloud</span>
      and/or <span class="btn btn-link" (click)="connect('youtube')">YouTube</span>
    </p>
  </div>

  <div class="card">
    <h3>Connected Accounts</h3>
    <p>Connect other accounts to synchronise playlists and favourited tracks</p>
    <div class="cp-grid">
      <div *ngFor="let account of accounts"
           class="grid-card">
        <div class="image">
          <img *ngIf="account.isConnected()"
               [src]="account.image.getLargeSizeUrl()">
          <div *ngIf="!account.isConnected()"
               class="new-account">
            <i class="{{providerMap[account.provider].icon}}"></i>
          </div>
        </div>
        <div class="description">
          <div class="title">
            {{providerMap[account.provider].title}}
          </div>
        </div>
        <div class="actions">
          <div *ngIf="!account.isConnected()"
               class="btn btn-link btn-primary"
               (click)="connect(account.provider)">
            Connect
          </div>
          <!--<div *ngIf="account.isConnected()"-->
               <!--class="btn btn-link btn-primary">-->
            <!--Disconnect-->
          <!--</div>-->
        </div>
      </div>
    </div>
  </div>

  <div class="card">
    <h3>Settings</h3>
    <button class="btn btn-default" (click)="openPrivacySettings()">Manage Privacy Settings</button>
    <button class="btn btn-danger" (click)="deleteAccount()">Delete your Account</button>
  </div>
</section>
